<template>
  <div
    class="outBorder"
    :style="{ width: props.width, height: props.height }"
  ></div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
</script>

<style scoped lang="scss">
.outBorder {
  box-shadow: 0 0 1.5vw v-bind("states.shadowColor") inset;
  background: linear-gradient(
        to left,
        v-bind("states.color"),
        v-bind("states.color")
      )
      left top no-repeat,
    linear-gradient(to bottom, v-bind("states.color"), v-bind("states.color"))
      left top no-repeat,
    linear-gradient(to left, v-bind("states.color"), v-bind("states.color"))
      right top no-repeat,
    linear-gradient(to bottom, v-bind("states.color"), v-bind("states.color"))
      right top no-repeat,
    linear-gradient(to left, v-bind("states.color"), v-bind("states.color"))
      left bottom no-repeat,
    linear-gradient(to bottom, v-bind("states.color"), v-bind("states.color"))
      left bottom no-repeat,
    linear-gradient(to left, v-bind("states.color"), v-bind("states.color"))
      right bottom no-repeat,
    linear-gradient(to left, v-bind("states.color"), v-bind("states.color"))
      right bottom no-repeat;
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
  transition: all 0.4s ease;
  border: 1px solid transparent;
  // color: white;
  padding: 10px;
}
</style>
